$(function () {
    //1- 进入 渲染第一屏数据 
    var currentPage = 1;
    var pageSize = 5;
    //存储上传图片的数据
    var picArr = [];
    render();
    function render() {
        $.ajax({
            url: '/product/queryProductDetailList',
            type: 'get',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (info) {
                console.log(info);  
                $('tbody').html(template('tmp', info));
            }
        })
    }


    //2-填充二级分类下拉列表
    $.ajax({
        url: '/category/querySecondCategoryPaging',
        type: 'get',
        data: {
            page: 1, 
            pageSize: 1000
        },
        dataType: 'json',
        success: function (info) {
            console.log(info);      
            //渲染数据
            $('.cate-list').html( template('tmp-cate', info));
        }
    })

    //3-点击分类列表时，获取当前列表的内容设置给button按钮
    $('.cate-list').on('click', 'a', function () {
        //将当前列表的内容复制给按钮
        $('.cate-text').text($(this).text()); //text()  innerText
        //在隐藏域中存放用户当前选中的二级分类的id，后期用于传递给后台
        $('.brandId').val($(this).data('id'));
        //设置当前表单验证状态是通过的
        $("#form").data('bootstrapValidator').updateStatus('brandId', 'VALID');
    });

    //4-监听文件上传插件上传成功事件
    $('#file').fileupload({
        dataType: 'json',
        // e 事件对象
        // data 服务器中保存图片的信息 
        done: function (e, data) {            
            console.log(data.result); 
            var url = data.result.picAddr; //获取图片地址
            //只要最近上传的三张图片的地址 和图片名称 
            //将图片添加到数组中
            picArr.unshift(data.result); 
            //将本次上次完成的图片添加到图片列表中
            //append 向盒子内部后面添加  prepend向盒子内部的前面
            $('.img-list').prepend('<img src="'+ url +'" width="80" alt="">');

            //如果picArr长度大于3，删除最后一个元素
            if (picArr.length > 3) {
                //删除最后一个元素
               屏
                //从图片列表中删除最后一个图片
                // $('.img-list img').eq( $('.img-list img').length-1 ).remove();
                //p:last-of-type 选中父元素中最后一个p标签，忽略其他类型元素 
                $('.img-list img:last-of-type').remove();
            }
            console.log(picArr);


            //当picArr的长度等于3时，设置表单状态验证通过
            if (picArr.length == 3) {
                $("#form").data('bootstrapValidator').updateStatus('brandLogo', 'VALID');
            }
            
        }
    })


    // 5-表单验证
    // 所有数据非空验证，
	// 库存必须是非0开头的数字
    // 尺码格式： xx-xx
    $('#form').bootstrapValidator({

          //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [],

        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },

        //验证字段
        fields: {
            // 品牌id
            brandId: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    }
                }
            },
            // 商品名称
            proName: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    }
                }
            },
            //商品描述
            proDesc: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    }
                }
            },
            // 库存
            num: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    },
                     //正则校验
                    // 数字 非0开头 
                    // [1-9] 匹配1-9数字
                    // * 任意此
                    // \d 数字
                    regexp: {
                        regexp: /^[1-9]\d*$/,
                        message: '库存必须是非0开头的数字'
                    }
                }
            },
            // 尺寸
            size: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    },
                      //20-60
                    regexp: {
                        regexp: /^\d{2}-\d{2}$/,
                        message: '尺码的格式必须是xx-xx格式 x是数字'
                    }
                }
              
            },
            // 原价
            oldPrice: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    }
                }
            },
            // 现价
            price: {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    }
                }
            },
            //图片
            brandLogo:  {
                validators: {
                    notEmpty: {
                        message: '此数据不能为空'
                    }
                }
            }
        }
    });


    //6-表单验证成功，获取表单数据，提交服务器
    $('#form').on('success.form.bv', function (e) {
        // 阻止默认行为
        e.preventDefault();
        //获取表单数据，通过ajax提交给服务器
        var dataStr = $('#form').serialize();
        console.log(dataStr);
        //需要手动拼接 图片的数据 name=zs&age=18&sex=m
        dataStr += '&picName1=' + picArr[0].picName + '&picAddr1=' + picArr[0].picAddr;
        dataStr += '&picName2=' + picArr[1].picName + '&picAddr2=' + picArr[1].picAddr;
        dataStr += '&picName3=' + picArr[2].picName + '&picAddr3=' + picArr[2].picAddr;
        
        console.log(dataStr);

        //数据处理完成，发送给后台
        $.ajax({
            url: '/product/addProduct',
            type: 'post',
            data: dataStr,
            dataType: 'json',
            success: function (info) {
                console.log(info);      
                // 1- 隐藏模态框
                $('#addModal').modal('hide');
                // 2-重新渲染第一页
                currentPage = 1;
                render();
                // 3-重置表单
                // 重置表单的验证样式和内容
                $("#form").data('bootstrapValidator').resetForm(true);
                // 4-手动重置
                $('.cate-text').text('请选择二级分类');
                //重置图片列表 删除图片列表
                $('.img-list img').remove();
                picArr = [];
            }
        })
        
        
    })

})